<!-- 中秋节活动页面 -->
<template>
	<view class="zqj-box" id="zqj-box">
		<page-head :transparent='true'>
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
			<slot slot="right">{{''}}</slot>
		</page-head>
		<!--S = banner图片-->
		<view class="banner">
			<image :src="zqjbanner1" mode="widthFix"></image>
			<image :src="zqjbanner2" mode="widthFix"></image>
		</view>
		<!--E = banner图片-->
		
		<!--S = 浓情中秋 臻致好礼-->
		<view class="banner">
			<image :src="zqjnav1" mode="widthFix"></image>
			<image :src="item.img" mode="widthFix" v-for="(item, index) in tabList" :key="index" @click="linkTo(item.url, index)"></image>
		</view>
		<!--E = 浓情中秋 臻致好礼-->
		
		<!--S = 爆款推荐 献礼中秋-->
		<view class="banner"><image :src="zqjnav2" mode="widthFix"></image></view>
		<view class="bot-box">
			<image :src="item.img" mode="widthFix" v-for="(item, index) in botList" :key="index" @click="linkTo(item.url, index)"></image>
		</view>
		<!--E = 爆款推荐 献礼中秋-->
		
		<view class="banner">
			<image :src="zqjto" mode="widthFix" @click="selfdetail"></image>
			<image :src="zqjnav3" mode="widthFix"></image>
			<image :src="zqjnav4" mode="widthFix" @click="btnClick"></image>
		</view>
	</view>
</template>

<script>
	import zqjbanner1 from '../../static/img/zqj/zqjbanner1.png'
	import zqjbanner2 from '../../static/img/zqj/zqjbanner2.png'
	
	import zqjnav1 from '../../static/img/zqj/zqjnav1.png'
	import zqjnav2 from '../../static/img/zqj/zqjnav2.png'
	import zqjnav4 from '../../static/img/zqj/zqjnav4.png'
	import zqjnav3 from '../../static/img/zqj/zqjnav3.png'
	import zqjto from '../../static/img/zqj/zqjto.png'
	
	import zqjtab1 from '../../static/img/zqj/zqjtab11.png'
	import zqjtab2 from '../../static/img/zqj/zqjtab12.png'
	import zqjtab3 from '../../static/img/zqj/zqjtab3.png'
	
	import zqjbot1 from '../../static/img/zqj/zqjbot1.png'
	import zqjbot2 from '../../static/img/zqj/zqjbot2.png'
	import zqjbot3 from '../../static/img/zqj/zqjbot3.png'
	import zqjbot4 from '../../static/img/zqj/zqjbot4.png'
	import zqjbot5 from '../../static/img/zqj/zqjbot5.png'
	import zqjbot6 from '../../static/img/zqj/zqjbot6.png'
	import zqjbot7 from '../../static/img/zqj/zqjbot7.png'
	import zqjbot8 from '../../static/img/zqj/zqjbot8.png'
	import zqjbot9 from '../../static/img/zqj/zqjbot9.png'
	import zqjbot10 from '../../static/img/zqj/zqjbot10.png'
	
	export default {
		data() {
			return {
				title:'中秋礼遇',
				zqjbanner1: zqjbanner1,
				zqjbanner2: zqjbanner2,
				zqjnav1: zqjnav1,
				zqjnav2: zqjnav2,
				zqjnav3: zqjnav3,
				zqjnav4: zqjnav4,
				zqjto: zqjto,
				tabList: [
					{
						url: '../tbdetail/tbdetail?skuId=576149270125&cid=0&title=澳门永辉蛋黄莲蓉广式月饼礼盒中秋送礼特产五仁豆沙团购四宝月饼&seller=淘宝&coupon_amount=100&startTime=2019-09-09&endTime=2019-09-13&tm=false',
						img: zqjtab1
					},
					{
						url: '../tbdetail/tbdetail?skuId=600118208307&cid=0&title=旺阳大闸蟹礼券 公4.5两母3.5两8只鲜活螃蟹提货卡券中秋团购送礼&seller=淘宝&coupon_amount=270&startTime=2019-09-09&endTime=2019-09-11&tm=false',
						img: zqjtab2
					},
					{
						url: '../selfdetail/selfdetail?skuId=8234&cid=1235&title=中大惠农中粮礼品卡中秋节礼品册团购月饼提货券398型自选购物卡册&seller=好品购',
						img: zqjtab3
					}
				],
				botList: [
					{
						url: '../selfdetail/selfdetail?skuId=8231&cid=125&title=果园老农 每日坚果礼盒 坚果炒货 每日代餐腰果核桃仁蔓越莓干混合坚果30g*7&seller=好品购',
						img: zqjbot1
					},
					{
						url: '../selfdetail/selfdetail?skuId=8232&cid=711&title=中粮 安达露西 橄榄油纯正礼盒 西班牙进口 750ML*2 中粮出品&seller=好品购',
						img: zqjbot2
					},
					{
						url: '../selfdetail/selfdetail?skuId=8233&cid=710&title=燕之坊 珍礼 中秋国庆节日干货礼盒 枸杞银耳桂圆香菇木耳粉丝 公司福利团购 1.24kg&seller=好品购',
						img: zqjbot3
					},
					{
						url: '../selfdetail/selfdetail?skuId=8235&cid=252&title=宏馨 中秋礼品茶叶 乌龙茶 一级安溪铁观音 250g&seller=好品购',
						img: zqjbot4
					},
					{
						url: '../selfdetail/selfdetail?skuId=8236&cid=127&title=香疆恬语 休闲零食 特产蜜饯果干 送礼佳品枣核之恋超大新疆和田红枣夹核桃仁500g/盒&seller=好品购',
						img: zqjbot5
					},
					{
						url: '../selfdetail/selfdetail?skuId=8238&cid=704&title=福临门 有机五常稻花香 有机  东北大米 中粮出品 大米 2kg&seller=好品购',
						img: zqjbot6
					},
					{
						url: '../selfdetail/selfdetail?skuId=8239&cid=546&title=南方黑芝麻 黑黑乳轻脂饮品248ml*12盒  黑芝麻燕麦黑豆冲饮谷物 即饮 营养早餐&seller=好品购',
						img: zqjbot7
					},
					{
						url: '../selfdetail/selfdetail?skuId=8241&cid=546&title=家乐氏水果麦片 谷兰诺拉草莓什锦即食谷物代餐 含燕麦早餐490g（35g*14小袋）（新老包装随机发货）&seller=好品购',
						img: zqjbot8
					},
					{
						url: '../selfdetail/selfdetail?skuId=8243&cid=124&title=印尼进口 皇冠（danisa）丹麦曲奇饼干908g（新老包装随机发货）&seller=好品购',
						img: zqjbot9
					},
					{
						url: '../selfdetail/selfdetail?skuId=7292&cid=126&title=卫龙 休闲零食 网红辣条 怀旧零食大礼包 大面筋 小面筋 亲嘴烧分享组合装888g/袋&seller=京东自营',
						img: zqjbot10
					}
				]
			}
		},
		onShow() {
			window.genCommonData()
		},
		methods: {
			// 跳转到详情页
			linkTo(url, index) {
				if(url !== '') {
					onEvent('page_home_top_banner1_goods' + (parseInt(index) + parseInt(1)));
					setTimeout(function() {
						if (url !== '') {
							h5NavigateTo({
								url: decodeURI(url)
							});
						}
					}, 1000);
				}
			},
			// 点击回到顶部
			btnClick () {
				document.getElementById("zqj-box").scrollIntoView({block: "start", behavior: "smooth"});
			},
			// 点击跳转到好品购页面
			selfdetail () {
				h5NavigateTo({
					url: '../selfsupport/selfsupport?title=好品购&cat_id=0'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zqj-box{
		width: 100%;
		background: #06165D;
		.banner{
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			
			image{
				width: 100%;
				display: block;
			}
		}
		
		.bot-box{
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			
			image{
				width: 50%;
				display: block;
			}
		}
	}
</style>
